<template>
  <el-menu
      :default-active="defaultActive"
      :router="true"
      mode="horizontal"
      background-color="#005aca"
      text-color="#fff"
      active-text-color="#66d8ff"
      class="el-menu-demo">
    <template v-for="item of mList">
      <!--  二级菜单    -->
      <template v-if="item.child.length > 0">
        <el-submenu :index="item.mid" popper-class="submenu-demo">
          <template slot="title">{{ item.mname }}</template>
          <div class="submenu-item">
            <el-menu-item v-for="child of item.child"
                          :index="child.mid"
                          :route="{path:child.route,query:{...child.query,m:child.mid,ml:child.mlid}}">
              {{ child.mname }}
            </el-menu-item>
          </div>
        </el-submenu>
      </template>
      <!--  一级菜单    -->
      <template v-else>
        <el-menu-item :index="item.mid"
                      :route="{path:item.route,query:{...item.query,m:item.mid,ml:'0'}}">
          {{ item.mname }}
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>

/**
 * 头部菜单
 */
export default {
  name: "TopMenu",
  data() {
    return {
      defaultActive: "/",
      mList: [
        {
          "mid": "1",
          "mname": "首页",
          "route": "/",
          "query": {},
          "child": []
        },
        {
          "mid": "2",
          "mname": "电子地图",
          "route": "#",
          "query": {},
          "child": [
            {
              "mid": "2_1",
              "mlid": "2_1_1",
              "mname": "在线地图",
              "route": "/online",
              "query": {}
            },
            {
              "mid": "2_2",
              "mlid": "2_2_1",
              "mname": "专题图层",
              "route": "/subject",
              "query": {}
            }
          ]
        },
        {
          "mid": "3",
          "mname": "汇聚中心",
          "route": "#",
          "query": {},
          "child": [
            {
              "mid": "3_1",
              "mlid": "3_1_1",
              "mname": "目录管理",
              "route": "/data/subjectCatalogue",
              "query": {}
            },
            {
              "mid": "3_2",
              "mlid": "3_2_1",
              "mname": "地图服务",
              "route": "/data/mapService",
              "query": {}
            },
            {
              "mid": "3_3",
              "mlid": "3_3_1",
              "mname": "应用服务",
              "route": "/data/applicationService",
              "query": {}
            },
            {
              "mid": "3_4",
              "mlid": "3_4_1",
              "mname": "数据服务",
              "route": "/data/dataService",
              "query": {}
            },
            {
              "mid": "3_5",
              "mlid": "3_5_1",
              "mname": "数据库服务",
              "route": "/data/dataBases",
              "query": {}
            },
            {
              "mid": "3_6",
              "mlid": "3_6_1",
              "mname": "文件服务",
              "route": "/data/fileManage",
              "query": {}
            }
          ]
        },
        {
          "mid": "4",
          "mname": "资源中心",
          "route": "/resources",
          "query": {},
          "child": []
        },
        {
          "mid": "5",
          "mname": "开发中心",
          "route": "/#",
          "query": {},
          "child": [
            {
              "mid": "5_1",
              "mlid": "5_1_1",
              "mname": "快速入门",
              "route": "/development/introduce",
              "query": {}
            },
            {
              "mid": "5_2",
              "mlid": "5_2_1",
              "mname": "开发包下载",
              "route": "/development/download",
              "query": {}
            },
            {
              "mid": "5_3",
              "mlid": "5_3_1",
              "mname": "API文档",
              "route": "/development/archive",
              "query": {}
            },
            {
              "mid": "5_4",
              "mlid": "5_4_1",
              "mname": "示例代码",
              "route": "/development/example",
              "query": {
                "footer": "0"
              }
            }
          ]
        },
        {
          "mid": "6",
          "mname": "应用中心",
          "route": "/application",
          "query": {},
          "child": []
        },
        {
          "mid": "7",
          "mname": "运维中心",
          "route": "#",
          "query": {},
          "child": [
            {
              "mid": "7_1",
              "mlid": "7_1_1",
              "mname": "用户管理",
              "route": "/operations/user",
              "query": {}
            },
            // {
            //   "mid": "7_2",
            //   "mlid": "7_2_1",
            //   "mname": "新闻资讯管理",
            //   "route": "/operations/newsManage",
            //   "query": {}
            // },
            {
              "mid": "7_3",
              "mlid": "7_3_1",
              "mname": "开发包管理",
              "route": "/operations/package",
              "query": {}
            },
            {
              "mid": "7_4",
              "mlid": "7_4_1",
              "mname": "操作日志",
              "route": "/operations/operlog",
              "query": {}
            },
            // {
            //   "mid": "7_5",
            //   "mlid": "7_5_1",
            //   "mname": "系统日志",
            //   "route": "/operations/syslog",
            //   "query": {},
            // },
            {
              "mid": "7_6",
              "mlid": "7_6_1",
              "mname": "数据备份",
              "route": "/operations/backups",
              "query": {}
            },
            {
              "mid": "7_7",
              "mlid": "7_7_1",
              "mname": "数据恢复",
              "route": "/operations/recovery",
              "query": {}
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.selectDefaultActive();
  },
  watch: {
    $route: {
      handler: "selectDefaultActive",
      deep: true,
    },
  },
  methods: {
    selectDefaultActive() {
      const path = this.$route.query.m;
      this.defaultActive = path === "" ? "1" : path;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-demo {
  height: 50px;
  border-bottom: 0 !important;

  :deep(.el-submenu__title) {
    width: 160px;
    height: 50px !important;
    line-height: 50px !important;
    text-align: center;
    font-size: 18px;
    border-bottom-color: rgb(0, 90, 202) !important; //清除菜单下方颜色
  }

  .el-menu-item {
    height: 50px;
    width: 160px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    border-bottom-color: rgb(0, 90, 202) !important; //清除菜单下方颜色
  }
}
</style>


<style lang="scss">
.el-menu-demo {
  .el-submenu__title i {
    color: #FFFFFF;
  }
}

.submenu-demo {
  .el-menu--popup {
    min-width: 160px;
  }

  .submenu-item {
    .el-menu-item {
      font-size: 14px;
      min-width: 160px;
      text-align: center;
    }
  }
}
</style>
